import './allRec.scss';
import { connect } from "react-redux";
import { Link } from 'react-router-dom';
import { setCookie } from '../../js/cookie';
import { PullToRefresh } from 'antd-mobile';

class AllrecUI extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            down: true,
            height: document.documentElement.clientHeight,
            data: [],
        }
    }
    render() {
        let homeData = this.props.homeData;
        let imgList = null;
        let textCard = null;
        let followCard = null;
        let videoSmallCard1 = null;
        let videoSmallCard2 = null;
        let domList = null;
        let bbsCard = null;
        if (homeData) {
            imgList = homeData.itemList[0].data.itemList.map((item, index) => (
                <div className="slide-item" key={index}>
                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/video/" + item.data.header.id); }}>
                        <img src={item.data.content.data.cover.detail} />
                    </a>
                    <span>{item.data.content.data.duration / 60 < 10 ? "0" + parseInt(item.data.content.data.duration / 60) : parseInt(item.data.content.data.duration / 60)}:{item.data.content.data.duration % 60 < 10 ? "0" + item.data.content.data.duration % 60 : item.data.content.data.duration % 60}</span>
                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.data.content.data.author.id); }}>
                        <div className="info" key={index}>
                            <div className="via">
                                <img src={item.data.content.data.author.icon} />
                            </div>
                            <div className="msg">
                                <h4>{item.data.header.title}</h4>
                                <p>{item.data.header.description}</p>
                            </div>
                        </div>
                    </a>
                </div>
            ));
            domList = homeData.itemList.map((item, index) => {
                if (item.type === "textCard") {
                    if (item.data.text == "查看全部热门排行") {
                        textCard = (
                            <div className="title">
                                <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/rank"); }}>{item.data.text}</a>
                            </div>)
                    } else {
                        textCard = (
                            <div className="title">
                                <h3>{item.data.text}</h3>
                            </div>
                        )
                    }
                    if (homeData.itemList[index + 3]) {
                        if (homeData.itemList[index + 1].type === "followCard") {
                            followCard = (
                                <div>
                                    <div className="imgBox">
                                        <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/video/" + homeData.itemList[index + 1].data.header.id); }}>
                                            <img src={homeData.itemList[index + 1].data.content.data.cover.detail} />
                                        </a>
                                        <span>{homeData.itemList[index + 1].data.content.data.duration / 60 < 10 ? "0" + parseInt(homeData.itemList[index + 1].data.content.data.duration / 60) : parseInt(homeData.itemList[index + 1].data.content.data.duration / 60)}:{homeData.itemList[index + 1].data.content.data.duration % 60 < 10 ? "0" + homeData.itemList[index + 1].data.content.data.duration % 60 : homeData.itemList[index + 1].data.content.data.duration % 60}</span>
                                    </div>
                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + homeData.itemList[index + 1].data.content.data.author.id); }}>
                                        <div className="info">
                                            <div className="via">
                                                <img src={homeData.itemList[index + 1].data.content.data.author.icon} />
                                            </div>
                                            <div className="msg">
                                                <h4>{homeData.itemList[index + 1].data.content.data.title}</h4>
                                                <p>{homeData.itemList[index + 1].data.header.title}</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            )
                        } else {
                            followCard = (
                                <div></div>
                            )
                        }
                        if (homeData.itemList[index + 2].type === "videoSmallCard") {
                            videoSmallCard1 = (
                                <div className="list-info cl">
                                    <div className="left-img">
                                        <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/video/" + homeData.itemList[index + 2].data.id); }}>
                                            <img src={homeData.itemList[index + 2].data.cover.detail} />
                                        </a>
                                        <span>{homeData.itemList[index + 2].data.duration / 60 < 10 ? "0" + parseInt(homeData.itemList[index + 2].data.duration / 60) : parseInt(homeData.itemList[index + 2].data.duration / 60)}:{homeData.itemList[index + 2].data.duration % 60 < 10 ? "0" + homeData.itemList[index + 2].data.duration % 60 : homeData.itemList[index + 2].data.duration % 60}</span>
                                    </div>
                                    <div className="left-info">
                                        <h3 className="el">{homeData.itemList[index + 2].data.title}</h3>
                                        <div><span>#{homeData.itemList[index + 2].data.category}</span></div>
                                    </div>
                                </div>
                            )
                        }
                        if (homeData.itemList[index + 3].type === "videoSmallCard") {
                            videoSmallCard2 = (
                                <div className="list-info cl">
                                    <div className="left-img">
                                        <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/video/" + homeData.itemList[index + 3].data.id); }}><img src={homeData.itemList[index + 3].data.cover.detail} /></a>
                                        <span>{homeData.itemList[index + 3].data.duration / 60 < 10 ? "0" + parseInt(homeData.itemList[index + 3].data.duration / 60) : parseInt(homeData.itemList[index + 3].data.duration / 60)}:{homeData.itemList[index + 3].data.duration % 60 < 10 ? "0" + homeData.itemList[index + 3].data.duration % 60 : homeData.itemList[index + 3].data.duration % 60}</span>
                                    </div>
                                    <div className="left-info">
                                        <h3 className="el">{homeData.itemList[index + 3].data.title}</h3>
                                        <div><span>#{homeData.itemList[index + 3].data.category}</span></div>
                                    </div>
                                </div>
                            )
                        }
                        if (homeData.itemList[index + 4].type !== "textCard") {
                            bbsCard = (
                                < div >
                                    <div className="imgBox">
                                        <Link to={"/bbs/recommend"}><img src={homeData.itemList[index + 4].data.image} /></Link>
                                    </div>
                                </div >)
                        } else {
                            bbsCard = null;
                        }
                    } else {
                        followCard = null;
                        videoSmallCard1 = null;
                        videoSmallCard2 = null;
                        bbsCard = null;
                    }
                    return (
                        <div className="list" key={index}>
                            {textCard}
                            {followCard}
                            {videoSmallCard1}
                            {videoSmallCard2}
                            {bbsCard}
                        </div>
                    )
                }
            });
        }
        if (homeData) {
            return (
                <PullToRefresh
                    damping={60}
                    ref={el => this.ptr = el}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                    direction={this.state.down ? 'down' : 'up'}
                    refreshing={this.state.refreshing}
                    onRefresh={() => {
                        this.setState({ refreshing: true });
                        setTimeout(() => {
                            location.reload()
                            this.setState({ refreshing: false });
                        }, 1000);
                    }}
                >
                    <div className="allRec">
                        <div className="header">
                            <div className="title">
                                <h3>{homeData.itemList[0].data.header.title}</h3>
                                <Link to={"/home/daily"}>{homeData.itemList[0].data.header.rightText}</Link>
                            </div>
                            <div className="banner">
                                <div className="imgs">
                                    <div className="slide-box">
                                        {imgList}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {domList}
                    </div>
                </PullToRefresh>
            )
        } else {
            return (<div></div>)
        }
    }
}

let mstp = state => {
    return {
        homeData: state.home.homeData
    }
};

export let Allrec = connect(mstp)(AllrecUI)